<div ng-controller="StorageCtrl">
    <div class="row-fluid">
        <div class="span8">
            <div class="row-fluid">
                <div class="span9">
                    <div class="btn-toolbar server-btn-toolbar ui-toolbar">
                        <div class="btn-group">
                            <button type="button" class="btn btn-mini" ng-click="do_add()">添加</button>
                            <!--<button type="button" class="btn btn-mini" ng-click="do_edit()">修改</button>-->
                        </div>
                        <button type="button" class="btn btn-danger btn-mini" ng-disabled="!selected_storage" ng-click="do_delete()">删除</button>
                    </div>
                </div>
                <div class="span3">
                    <span>每页显示</span>
                    <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes" ng-change="change(page_size)"></select>
                    <span>条</span>
                </div>
            </div>
            <table class="table table-bordered table-condensed"  tableorder="storages">
                <thead>
                <tr>
                    <th by="name">名称</th>
                    <th by="type">类型</th>
                    <th>服务器</th>
                    <th by="protocol">协议</th>
                    <th by="totalsize">大小</th>
                    <th>使用率</th>
                    <th>关联集群</th>
                    <th by='status'>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-click="show_details()" selectable='storage' exclusive ng-repeat="storage in storages |orderBy:orderfield:reverse">
                    <td>{{storage.name}}</td>
                    <td>{{storage.type|storagetype}}</td>
                    <td>{{storage.storage_path}}</td>
                    <td>{{storage.protocol}}</td>
                    <td>{{storage.totalsize}} GB</td>
                    <td>
                        <div class="progress">
                        <span class="green"
                              style="width: {{ (storage.used/storage.totalsize)*100 |round }}%;"><span>{{ (storage.used/storage.totalsize)*100 |round }}%</span></span>
                        </div>
                    </td>
                    <td>{{storage.cluster.name}}</td>
                    <td><img ng-src="/static/images/vmstatus/{{ storage.status }}.png" alt="" class="img-size16"/></td>
                </tr>
                </tbody>
            </table>
            <div class="pagination">
                <ul>
                    <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a></li>
                    <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)" ng-class="(i == current_page) && 'active'">
                        <a href="javascript:void(0)">{{i + 1}}</a>
                    </li>
                    <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a></li>
                </ul>
            </div>
        </div>
        <div class="span4" id="details_info" ng-show="selected_storage">
            <div class="well">
                <div class="row-fluid ">
                    <div class="span3">可用大小:</div>
                    <div class="span3"><span class=" label label-success">{{selected_storage.totalsize-selected_storage.used}} GB</span></div>
                    <div class="span3">已用大小:</div>
                    <div class="span3"><span class=" label label-success">{{selected_storage.used}} GB</span></div>

                </div>
                <div class="row-fluid ">
                    <div class="span3">镜像:</div>
                    <div class="span3"><span class=" label label-success">{{extras.image_length}}</span></div>
                    <div class="span3" >实例:</div>
                    <div class="span3"><span class=" label label-success">{{extras.inst_length}}</span></div>
                </div>
                <div class="row-fluid ">
                    <div class="span3">iso:</div>
                    <div class="span3"><span class=" label label-success">{{extras.iso_nums}}</span></div>
                    <div class="span3" >虚拟机磁盘:</div>
                    <div class="span3"><span class=" label label-success">{{extras.vdisk_length}}</span></div>
                </div>
            </div>
        </div>
    </div>
</div>